<template>
	<view :style="[{paddingTop:CustomBar+'px'}]" class="container">
		<cu-custom bgColor="bg-colorP" :isBack="isBackStatus" fatherCss="box-shadow:none">
			<block slot="backText"></block>
			<block slot="content">商铺入驻</block>
		</cu-custom>
		<view class="container">
			<view class="weui-box">
				<view class="info-item">
					<view class='label'>店铺名称
						<i></i>
					</view>
					<input type='text' placeholder='请输入店铺名称' placeholder-class='info-placeholder' v-model='name' maxlength='20'></input>
				</view>
				<view class="info-item">
					<view class='label'>联系方式
						<i></i>
					</view>
					<input type='number' placeholder='请输入联系方式' placeholder-class='info-placeholder' v-model='phone'></input>
				</view>

				<view class="info-item">
					<view class='label'>身份证号
						<i></i>
					</view>
					<input type='idcard' placeholder='请输入身份证号' placeholder-class='info-placeholder' v-model='identity_card'></input>
				</view>

				<view class="info-item">
					<view class='label'>所属行业
						<i></i>
					</view>
					<view class="industy">
						<picker @change="bindPickerChange" range-key="industry_name" :value="typeIndex" :range="typeList">
							<text :style='typeList[typeIndex].industry_name!=""?"":"color: #ccc"'>{{typeList[typeIndex].industry_name}}</text>
							<image src="http://xarkbucket.oss-cn-hangzhou.aliyuncs.com/enter.png" />
						</picker>
					</view>
				</view>

				<view class="info-item">
					<view class='label'>让利比例
						<i></i>
					</view>
					<input type='number' placeholder='请输入佣金比例' placeholder-class='info-placeholder' v-model='goldadmin'></input>
					<view>%</view>
				</view>

				<view class="info-item">
					<view class='label'>营业时间
						<i></i>
					</view>
					<view class="time">
						<picker mode="time" :value="time" start="00:00" end="23:59" @change="bindTimeChangeStart">
							<view class="picker" :style='start_time!="请选择开始时间"?"color: #333":"color: #ccc"'>
								{{start_time}}
							</view>
						</picker>
						<view class="ali">~</view>
						<picker mode="time" :value="time" start="00:00" end="23:59" @change="bindTimeChangeEnd">
							<view class="picker" :style='end_time!="请选择结束时间"?"color: #333":"color: #ccc"'>
								{{end_time}}
							</view>
						</picker>
					</view>
				</view>

				<view class='common-select info-item'  @click='setAddressValue'>
					<view class='label'>详细地址
						<i></i>
					</view>
					<input class='single-address'  @click='setAddressValue' placeholder='请设置店铺地址' placeholder-class="info-placeholder" 	 :value='baseInfo.totalAdress+selectedAddress' disabled></input>
				</view>

				<view class="info-item" style="border: none;">
					<view class='label'>商铺首图
						<i></i>
					</view>
				</view>

				<view class="activeItem" @click="imageShopsUp">
					<view class="couponUp couponUp-shop" v-if="!upShopsImg" > 
						<image class="low-img" src="http://xarkbucket.oss-cn-hangzhou.aliyuncs.com/add_ctf.svg"></image>
					</view>
					<view v-if="upShopsImg" class="img-success">
						<image class="couponUp" :src="upShopsImg"></image>
						<text>点击图片重新上传</text>
					</view>
				</view>
				
				<view class="activeItem imgRemain" style="border-bottom: solid 1rpx #efefef">为展示清晰，建议尺寸为750*360(像素)</view>

				<view class="info-item" style="border-bottom:none;">
					<view class='label'>营业执照
						<i></i>
					</view>
				</view>

				<view class="activeItem" style="border: none" @click="imageUp">
					<view class="couponUp" v-if="!upImg">
						<image class="low-img" src="http://xarkbucket.oss-cn-hangzhou.aliyuncs.com/add_ctf.svg"></image>
					</view>
					<view v-if="upImg" class="img-success">
						<image class="couponUp" :src="upImg"></image>
						<text>点击图片重新上传</text>
					</view>
				</view>
				
				<view class="activeItem imgRemain">请上传清晰的营业执照，方便审核</view>

				<view class="info-item" style="border-top:solid 1rpx #f2f2f2;border-bottom:none;">
					<view class='label'>店铺介绍
						<i></i>
					</view>
				</view>

				<view class="weui-cells" v-if='!setAddress'>
					<view class="weui-cell">
						<view class="weui-cell__bd">
							<textarea class="weui-textarea" placeholder="请输入店铺介绍" v-model='desc' placeholder-class='info-placeholder' rows="1"></textarea>
						</view>
					</view>
				</view>

				<!-- <view class="check-truth">
					<checkbox-group @change="checkboxChange">
						<label class="checkbox">
							<checkbox value="1" color="#3080e8" />
						</label>
					</checkbox-group>
					<view>
						我已同意比福瑞
						<text @click='showLisence'>《比福瑞商户服务协议》</text>
					</view>
				</view> -->

				<view class="btn-shops" @click='isCommit?formSubmit():noSubite()'>提交</view>
			</view>
		</view>

		<view class="slide-content" v-if='setAddress'>
			<view class="write-shows">
				<view class="title">
					<view bindtap='restValue'></view>
					<view>商铺地址</view>
					<view @click='hideSlide'>确定</view>
				</view>
				<view class='seletCon'>
					<view class='comsel province' @click='bindProvince'>
						<text>{{selectedProvince}}</text>
						<text v-if="isType=='province'"></text>
					</view>
					<view class='right-line'></view>
					<view class='comsel city' @click='getCityList' v-if="selectedProvince!='请选择'" :data-name='selectedCity'>
						<text>{{selectedCity}}</text>
						<text v-if="isType=='city'"></text>
					</view>
					<view class='right-line' v-if="selectedProvince!='请选择'"></view>

					<view class='comsel area' @click='getAreaList' v-if="selectedCity!='请选择'" :data-name='selectedArea'>
						<text>{{selectedArea}}</text>
						<text v-if='isType=="area"'></text>
					</view>
					<view class='right-line' v-if="selectedCity!='请选择'"></view>

					<view class='comsel address' style='border-right:0' v-if="selectedArea!='请选择'||selectedAddress!=''" @click='getAddress'>
						<text>请填写</text>
						<text v-if='isType=="address"'></text>
					</view>
				</view>
				<!-- 填写地址 -->
				<view class='fill-address' v-if='isType=="address"'>
					<input placeholder='请填写街道或楼牌号（省市区信息请勿重复填写）' placeholder-class="info-placeholder" v-model="selectedAddress"></input>
				</view>

				<!-- 选择省 -->
				<scroll-view scroll-y class="showList" v-if="isType!='address'" bindscrolltoupper="upper" bindscrolltolower="lower"
				 bindscroll="scroll" :scroll-into-view="toView" :scroll-top="scrollTop">
					<view :id="'once'+index" class="show-item" :class="item.id==(isType=='province'?provinceId:isType=='city'?cityId:isType=='area'?areaId: '')?'active':''"
					 v-for="(item,index) in showList" :key="index" @click='selectItem' :data-id="item.region_id" :data-name="item.region_name"
					 :data-code="item.region_id">
						{{item.region_name}}
					</view>
				</scroll-view>
			</view>
		</view>


		<view class="layer-content" v-if="lisenceShow">
			<view class="layer-cont">
				<image @click='close' src="http://xarkbucket.oss-cn-hangzhou.aliyuncs.com/lisence/c65d80c6e6aa6b896e7a15370d5cc91.png"
				 class="close-btn"></image>
				<view class="contnet-xieyi">
					<!-- <u-parse :content="returnText"></u-parse> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var uploadImage = require('@/utils/updateFile/uploadFile.js');
	var util = require('@/utils/formatDate.js');
	import uParse from '@/components/u-parse/u-parse.vue'
	export default {
		components: {
			uParse
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				userInfo: {},
				start_time: '请选择开始时间',
				end_time: '请选择结束时间',
				// 控制选择框显示隐藏
				setAddress: false,
				selectedProvince: '请选择',
				selectedCity: '请选择',
				selectedArea: '请选择',
				selectedAddress: '',
				isType: 'false',
				// 地区id
				provinceId: 0,
				cityId: 0,
				areaId: 0,
				// scroll
				toView: '',
				nowTop: 0,
				scrollTop: 0,
				// 地区code
				provinceCode: 0,
				cityCode: 0,
				areaCode: 0,
				// 省市区top
				p_top: 0,
				c_top: 0,
				a_top: 0,
				baseInfo: {
					totalAdress: ''
				},
				isCommit: true,
				apiType: 'Categorys/getLists',
				typeList: [],
				typeIndex: 0,
				upImg: '',
				upShopsImg:'',
				lisenceShow: false,
				isCheck: false,
				scene: '',
				showList: [],
				desc: '',
				returnText: '',
				identity_card: '',
				name: '',
				phone: "",
				idcard: "",
				address: "",
				code: "",
				license: "",
				goldadmin: "",
				upImgFileName:'',
				upImgShopsFileName:'',
				isBackStatus: false
			}
		},
		onLoad(options) {
			if(options.status==1){
				this.isBackStatus = true
			}
			if (!uni.getStorageSync('userInfo')) {
				let curUrl = `/${this.curUrlWithArgs()}`+'?'
				if (options) {
					for (var key in options) {
						var value = options[key]
						curUrl += key + '=' + value + '&'
					}
				}
				curUrl = encodeURIComponent(curUrl)
				uni.redirectTo({
					url: `/pages/login?next=${curUrl}`,
				})
				return
			}
			if (options == undefined) {

			} else {
				if (!options.scene) {

				} else {
					var scene = decodeURIComponent(options.scene);
					this.scene = scene
				}
			}
			this.userInfo = uni.getStorageSync('userInfo');
			this.getProvinceList();
			this.getType()
			// this.returnText = util.returnText()

		},
		methods: {
			/*获取当前页带参数的url*/
			curUrlWithArgs() {
				var pages = getCurrentPages()
				var currentPage = pages[pages.length - 1]
				var url = currentPage.route
				var options = currentPage.options
				var urlWithArgs = url + '?'
				for (var key in options) {
					var value = options[key]
					urlWithArgs += key + '=' + value + '&'
				}
				urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length - 1)
				return urlWithArgs
			},
			noSubite() {},
			bindPickerChange(e) {
				this.typeIndex = e.detail.value
			},

			checkboxChange(e) {
				console.log('checkbox发生change事件，携带value值为：', e.detail.value)
				if (e.detail.value.length > 0) {
					this.isCheck = true
				} else {
					this.isCheck = false
				}
			},

			showLisence() {
				this.lisenceShow = true
				this.$forceUpdate()
			},

			close() {
				this.lisenceShow = false
			},

			// 提交
			formSubmit() {
				var that = this
				var params = {};
				params.parent_id = this.scene;
				params.name = this.name;
				params.phone = this.phone;
				params.idcard = this.identity_card;
				params.address = this.baseInfo.explicitAdress;
				params.desc = this.desc;
				params.code = this.baseInfo.pca_id;
				params.start_time = this.start_time;
				params.end_time = this.end_time;
				// params.license = this.upImg; //营业执照
				params.license = this.upImgFileName;
				params.shop_image = this.upImgShopsFileName
				params.is_agreement = 1;
				params.goldadmin = this.goldadmin;
				if (!params.name) {
					uni.showToast({
						title: '请输入商铺名称',
						icon: 'none'
					})
					return false;
				}
				
				if (!params.phone) {
					uni.showToast({
						title: '请输入手机号/座机',
						icon: 'none'
					})
					return false;
				}
				
				if (!params.idcard) {
					uni.showToast({
						title: '请输入身份证',
						icon: 'none'
					})
					return false;
				} else if (!this.IdentityValid(params.idcard)) {
					uni.showToast({
						title: '身份证格式有误',
						icon: 'none'
					})
					return false
				}

				// if (!this.typeIndex) {
				// 	uni.showToast({
				// 		title: '请勾选所属行业',
				// 		icon: 'none'
				// 	})
				// 	return false;
				// }
				params.industry_id = this.typeList[this.typeIndex].id; //行业id

				if (!params.goldadmin) {
					uni.showToast({
						title: '请设置佣金比例',
						icon: 'none'
					})
					return false;
				} else if (params.goldadmin > 100) {
					uni.showToast({
						title: '无效的佣金比例',
						icon: 'none'
					})
					return false;
				}
				if (this.start_time == '请选择开始时间') {
					uni.showToast({
						title: '请选择开始时间',
						icon: 'none'
					})
					return false;
				}
				if (this.end_time == '请选择结束时间') {
					uni.showToast({
						title: '请选择结束时间',
						icon: 'none'
					})
					return false;
				}

				if (!params.address) {
					uni.showToast({
						title: '请输入店铺地址',
						icon: 'none'
					})
					return false;
				}
				
				if (!params.shop_image) {
					uni.showToast({
						title: '请上传商户主图',
						icon: 'none'
					})
					return false;
				}

				if (!params.license) {
					uni.showToast({
						title: '请上传营业执照',
						icon: 'none'
					})
					return false;
				}

				if (!params.desc) {
					uni.showToast({
						title: '请输入店铺介绍',
						icon: 'none'
					})
					return false;
				}

				// if (!this.data.isCheck) {
				// 	uni.showToast({
				// 		title: '请同意商户服务协议',
				// 		icon: 'none'
				// 	})
				// 	return false;
				// }

				if (this.isCommit) {
					this.$request({
						url: '/Shop/business_register',
						data: params,
						success: res => {
							if (res.data.status == 1) {
								wx.showModal({
									title: '提示',
									showCancel: false,
									confirmColor: '#ff0000',
									content: res.data.message,
									success: function(res) {
										if (res.confirm) {
											console.log('用户点击确定')
											that.isCommit = true
										}
									}
								})
							}
							uni.hideLoading()
						},
						fail: () => {},
						complete: () => {}
					});
				}


			},

			// 身份证校验
			IdentityValid(code) {
				var city = {
					11: "北京",
					12: "天津",
					13: "河北",
					14: "山西",
					15: "内蒙古",
					21: "辽宁",
					22: "吉林",
					23: "黑龙江 ",
					31: "上海",
					32: "江苏",
					33: "浙江",
					34: "安徽",
					35: "福建",
					36: "江西",
					37: "山东",
					41: "河南",
					42: "湖北 ",
					43: "湖南",
					44: "广东",
					45: "广西",
					46: "海南",
					50: "重庆",
					51: "四川",
					52: "贵州",
					53: "云南",
					54: "西藏 ",
					61: "陕西",
					62: "甘肃",
					63: "青海",
					64: "宁夏",
					65: "新疆",
					71: "台湾",
					81: "香港",
					82: "澳门",
					91: "国外 "
				};
				var tip = "";

				if (!code || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)?$/i.test(code)) {
					return false;
				} else if (!city[code.substr(0, 2)]) {
					return false;
				} else {
					//18位身份证需要验证最后一位校验位
					if (code.length == 18) {
						code = code.split('');
						//∑(ai×Wi)(mod 11)
						//加权因子
						var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
						//校验位
						var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2];
						var sum = 0;
						var ai = 0;
						var wi = 0;
						for (var i = 0; i < 17; i++) {
							ai = code[i];
							wi = factor[i];
							sum += ai * wi;
						}
						var last = parity[sum % 11];
						if (parity[sum % 11] != code[17]) {
							return false;
						}
					}
				}
				return true;
			},
			
			// 商户主图上传
			imageShopsUp(){
				var that = this;
				uni.chooseImage({
					count: 1, // 默认最多一次选择9张图
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					success: function(res) {
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
						var tempFilePaths = res.tempFilePaths;
						var nowTime = util.formatTime(new Date());
				
						//显示消息提示框
						uni.showLoading({
							title: '上传中',
							mask: true
						})
				
						//上传图片
						//你的域名下的/cbb文件下的/当前年月日文件下的/图片.png
						//图片路径可自行修改
						uploadImage(res.tempFilePaths[0], 'shopImg/',
							function(result) {
								that.upShopsImg = result
								that.upImgShopsFileName = 'shopImg/'+result.split('shopImg/')[1]
								uni.hideLoading();
								uni.showToast({
									title: '上传成功',
									icon: 'none'
								})
							},
							function(err) {
								uni.hideLoading()
								uni.showToast({
									title: JSON.stringify(err),
									icon: 'none'
								})
							}
						)
					}
				})
			},

			// 营业执照上传
			imageUp() {
				var that = this;
				uni.chooseImage({
					count: 1, // 默认最多一次选择9张图
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					success: function(res) {
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
						var tempFilePaths = res.tempFilePaths;
						var nowTime = util.formatTime(new Date());

						//显示消息提示框
						uni.showLoading({
							title: '上传中',
							mask: true
						})

						//上传图片
						//你的域名下的/cbb文件下的/当前年月日文件下的/图片.png
						//图片路径可自行修改
						uploadImage(res.tempFilePaths[0], 'lisence/',
							function(result) {
								that.upImg = result
								that.upImgFileName = 'lisence/'+result.split('lisence/')[1]
								uni.hideLoading();
								uni.showToast({
									title: '上传成功',
									icon: 'none'
								})
							},
							function(err) {
								uni.hideLoading()
								uni.showToast({
									title: '上传失败',
									icon: 'none'
								})
							}
						)
					}
				})
			},
			// 显示mask
			setAddressValue() {
				this.setAddress = true
			},
			// 获取详细地址
			getAddress: function() {
				this.isType = 'address'
			},

			bindTimeChangeStart(e) {
				this.start_time = e.detail.value
			},

			bindTimeChangeEnd(e) {
				this.end_time = e.detail.value
			},

			goPhone() {
				uni.makePhoneCall({
					phoneNumber: '029-68953163'
				})
			},
			getType() {
				var that = this
				this.$request({
					url: '/Categorys/getLists',
					success: res => {
						if (res.data.status == 1) {
							that.typeList = res.data.data
						}
						uni.hideLoading()
					},
					fail: () => {},
					complete: () => {}
				});
			},

			//隐藏mask
			hideSlide() {
				if (this.selectedAddress == '' || this.selectedCity == '请选择' || this.selectedArea == '请选择') {
					uni.showToast({
						title: '请设置完整地址',
						icon: 'none'
					})
					return
				}
				this.setAddress = false
				var baseInfo = {}
				baseInfo.totalAdress = this.selectedProvince + this.selectedCity + this.selectedArea
				baseInfo.explicitAdress = this.selectedAddress
				baseInfo.pca_name = this.selectedProvince + '-' + this.selectedCity + '-' + this.selectedArea
				baseInfo.pca_id = this.provinceId + '-' + this.cityId + '-' + this.areaId
				this.baseInfo = baseInfo
			},

			upper: function(e) {
				console.log(e)
			},

			lower: function(e) {
				console.log(e)
			},

			scroll: function(e) {
				this.nowTop = e.detail.scrollTop
			},

			// 点击
			selectItem: function(e) {
				var that = this
				var isTy = that.isType
				var id = e.currentTarget.dataset.id
				var code = e.currentTarget.dataset.code
				var name = e.currentTarget.dataset.name

				var top = that.nowTop
				switch (isTy) {
					case 'province':
						// 如果已有，则置空市，区
						if (that.selectedProvince != '请选择') {
							that.selectedCity = '请选择'
							that.cityId = 0
							that.cityCode = 0
							that.selectedArea = '请选择'
							that.areaId = 0
							that.areaCode = 0
							that.selectedAddress = ''
						}
						that.selectedProvince = name
						that.provinceId = id
						that.provinceCode = code
						that.p_top = top
						that.getCityList();
						return
					case 'city':
						// 如果已有，则置空区
						if (that.selectedCity != '请选择') {
							that.selectedArea = '请选择'
							that.areaId = 0
							that.areaCode = 0
							that.selectedAddress = ''

						}
						that.selectedCity = name
						that.cityId = id
						that.cityCode = code
						that.c_top = top
						that.getAreaList()
						return
					case 'area':
						that.selectedArea = name
						that.areaId = id
						that.areaCode = code
						that.isType = 'address'
						that.a_top = top
						that.selectedAddress = ''
						return
				}
			},
			bindProvince() {
				this.getProvinceList()
			},
			// 获取省列表
			getProvinceList: function() {
				var that = this;
				that.showList = []
				this.$request({
					url: '/BaseRegion/province',
					success: res => {
						if (res.data.status == 1) {
							that.showList = res.data.data
							that.isType = 'province'
							that.scrollTop = that.p_top
						}
						uni.hideLoading()
					},
					fail: () => {},
					complete: () => {}
				});
			},

			// 获取市列表
			getCityList: function() {
				var that = this;
				that.showList = []
				var params = {
					region_id: that.provinceId
				}

				this.$request({
					url: '/BaseRegion/city',
					data: params,
					success: res => {
						if (res.data.status == 1) {
							that.showList = res.data.data
							that.isType = 'city'
							that.scrollTop = that.c_top
						}
						uni.hideLoading()
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 获取区列表
			getAreaList: function() {
				var that = this;
				that.showList = []
				var params = {
					region_id: that.cityId
				}
				this.$request({
					url: '/BaseRegion/area',
					data: params,
					success: res => {
						if (res.data.status == 1) {
							that.showList = res.data.data
							that.isType = 'area'
							that.scrollTop = that.a_top
						}
						uni.hideLoading()
					},
					fail: () => {},
					complete: () => {}
				});
			},
		}
	}
</script>

<style>
	page {
		background: #fff;
	}
</style>
<style scoped>
	@import url("../components/u-parse/u-parse.css");
	
	.container{
		background: #fff;
	}

	.head-box {
		text-align: center;
		padding: 66rpx 0;
	}

	.head-box .user-img {
		width: 130rpx;
		height: 130rpx;
	}

	.user-name {
		display: block;
		font-size: 32rpx;
		color: #424242;
	}

	.weui-box {
		padding: 0 20rpx 50rpx;
	}

	.view-tip {
		color: #fe6767;
		padding: 15rpx 30rpx;
		font-size: 24rpx;
	}

	textarea {
		width: 100%;
		background: #f8f8f8;
		padding: 20rpx;
		box-sizing: border-box;
		color: #333;
	}

	.weui-cell {
		padding: 0;
	}

	.view-title {
		padding: 15rpx 30rpx;
		color: #6f6f6f;
		font-size: 30rpx;
	}

	.view-map {
		border: 1px solid #e7e7e7;
		width: 100%;
		height: 350rpx;
		overflow: hidden;
	}

	.map-box {
		width: 100%;
		height: 350rpx;
		overflow: auto;
	}

	.my-info {
		padding: 0 20rpx;
		position: relative;
		margin-top: 20rpx;
	}

	.mime-bg {
		width: 100%;
		height: 313rpx;
	}

	.avatar {
		width: 178rpx;
		height: 178rpx;
		border-radius: 50%;
	}

	.my-name {
		font-family: PingFangSC-Medium;
		font-size: 30rpx;
		color: #fff;
		letter-spacing: 0.5px;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.summary {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1000;
		height: 320rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.summary>view:first-child {
		width: 300rpx;
		text-align: center;
	}

	page {
		background: #fff;
	}

	.phone {
		font-size: 28rpx;
		color: #666;
		margin-top: 30rpx;
		/* text-align: center; */
		box-sizing: border-box;
		padding-left: 30rpx;
	}

	.phone text {
		background: linear-gradient(to right, #de2167, #1b81cc);
		-webkit-background-clip: text;
		color: transparent;
	}

	button {
		background: #3080e8;
		color: #fff;
	}

	/*  input 公共样式 */

	.info-item {
		display: flex;
		border-bottom: 1rpx solid #edebf3;
		height: 88rpx;
		align-items: center;
		width: 100%;
		box-sizing: border-box;
		background: #fff;
	}

	.info-item .label {
		width: 140rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: justify;
		overflow: hidden;
		vertical-align: top;
		font-size: 30rpx;
		color: #4d4d4d;
		margin-right: 20rpx;
	}

	.info-item .label i {
		display: inline-block;
		width: 100%;
		height: 0;
	}

	.info-item .set {
		flex: 1;
		font-size: 32rpx;
		color: #ccc;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.info-item input {
		flex: 1;
		font-size: 30rpx;
		color: #333;
		/* text-align: right; */
	}

	.info-placeholder {
		font-size: 30rpx;
		color: #ccc;
	}

	.common-select {
		overflow: hidden;
		height: 88rpx;
		line-height: 100rpx;
		border-bottom: 1px solid #edebf3;
		display: flex;
		align-items: center;
	}

	.common-select .tit {
		font-size: 34rpx;
		color: #4d4d4d;
		margin-right: 20rpx;
	}

	.single-address {
		/* text-align: right; */
		width: 500rpx;
		overflow: hidden;
		color: #333;
		font-size: 50rpx;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.time {
		flex: 1;
		display: flex;
	}

	.time .ali {
		width: 50rpx;
		text-align: center;
		color: #ccc;
	}

	.time picker {
		/* flex: 1; */
	}

	.time picker {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.time picker view {
		font-size: 30rpx;
		color: #ccc;
	}

	/* 下方select 的样式 */

	.slide-content {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		transition: all 0.5s;
		z-index: 9;
		overflow-y: hidden;
		background: rgba(0, 0, 0, 0.5);
	}

	.slide-content .write-shows {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 670rpx;
		background: #fff;
		transition: all 0.5s;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	.slide-content .write-shows .title {
		height: 56rpx;
		position: relative;
		margin: 33rpx 0 53rpx 0;
	}

	.slide-content .write-shows .title>view:nth-child(1) {
		position: absolute;
		left: 30rpx;
		top: 0;
		width: 100rpx;
		height: 56rpx;
		border-radius: 10rpx;
		color: #999;
		font-size: 28rpx;
		line-height: 56rpx;
		text-align: center;
	}

	.slide-content .write-shows .title>view:nth-child(2) {
		text-align: center;
		line-height: 56rpx;
		color: #333;
		height: 32rpx;
	}

	.slide-content .write-shows .title>view:nth-child(3) {
		position: absolute;
		right: 30rpx;
		top: 0;
		width: 100rpx;
		height: 56rpx;
		background-color: #F34930;
		border-radius: 10rpx;
		color: #fff;
		font-size: 28rpx;
		text-align: center;
		line-height: 56rpx;
	}

	.filter-show {
		border-bottom: solid 1rpx #edebf3;
		display: flex;
		height: 70rpx;
		box-sizing: border-box;
	}

	.filter-show>view {
		width: 156rpx;
		height: 70rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.filter-show>view>text {
		display: block;
		text-align: center;
		font-size: 32rpx;
		line-height: 32rpx;
		height: 32rpx;
		color: #333;
	}

	.filter-show>view:nth-child(1)>text:nth-child(1) {
		border-right: 1rpx solid #ccc;
	}

	.filter-show>view:nth-child(2)>text {
		height: 4rpx;
	}

	.filter-show>view:nth-child(2)>text:nth-child(2) {
		height: 4rpx;
		background-color: #3080e8;
	}

	.filter-show>view:nth-child(2)>text:nth-child(1) {
		color: #3080e8;
	}

	.showList {
		flex: 1;
		width: 100%;
		overflow-y: auto;
		margin-top: 25rpx;
	}

	.showList .show-item {
		text-align: center;
		font-size: 32rpx;
		color: #666;
		margin-bottom: 50rpx;
		/* margin-left: 30rpx; */
		margin-top: 38rpx;
		/* width: 23%; */
	}

	.showList .show-item.active {
		color: #3080e8;
		background: url('http://xarkbucket.oss-cn-hangzhou.aliyuncs.com/arr_r.svg') no-repeat;
		background-size: 13rpx 24rpx;
		background-position: 32rpx 50%;
	}

	.want-site {
		font-size: 28rpx;
		color: #999;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.want-site text {
		font-size: 28rpx;
		text-decoration: underline;
		color: #3080e8;
	}

	.layer {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.2);
		display: flex;
		justify-content: center;
		/* align-items: center; */
		z-index: 99;
	}

	.layer .content {
		width: 650rpx;
		height: 400rpx;
		border-radius: 10rpx;
		background: #fff;
		position: relative;
		display: flex;
		flex-direction: column;
		margin-top: 300rpx;
	}

	.layer .content image {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: -20rpx;
		right: -20rpx;
	}

	.infom {
		height: 310rpx;
		border-radius: 10rpx 10rpx 0 0;
		width: 100%;
		background: #fff;
		padding: 0 53rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.infom>view {
		width: 100%;
		padding: 10rpx 0;
		box-sizing: border-box;
		display: flex;
		border-bottom: solid 1rpx #f2f2f2;
	}

	.infom>view .title {
		color: #333;
		font-size: 30rpx;
		line-height: 55rpx;
		width: 150rpx;
		height: 50rpx;
		text-align: justify;
		overflow: hidden;
		vertical-align: top;
		margin-right: 20rpx;
	}

	.infom>view .title i {
		display: inline-block;
		width: 100%;
		height: 0;
	}

	.infom>view input {
		line-height: 51rpx;
		height: 51rpx;
		margin-left: 15rpx;
	}

	.setsat {
		flex: 1;
		background-color: #3080e8;
		color: #fff;
		text-align: center;
		line-height: 90rpx;
		border-radius: 0 0 10rpx 10rpx;
	}

	/* mask */

	.seletCon {
		overflow: hidden;
		border-bottom: 1px solid #edebf3;
		min-height: 78rpx;
	}

	.seletCon .comsel {
		float: left;
		color: #333;
		height: 78rpx;
		min-width: 20%;
		max-width: 26%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.seletCon .comsel text:nth-child(1) {
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		overflow: hidden;
		-webkit-box-orient: vertical;
		text-align: center;
		font-size: 32rpx;
		padding: 0 25rpx;
	}

	.seletCon .comsel text:nth-child(2) {
		display: block;
		background: #F34930;
		width: 100%;
		height: 1px;
	}

	.tui-picker-detail {
		font-size: 32rpx;
	}

	.fill-address {
		/* height: 40rpx; */
		color: #ccc;
		font-size: 30rpx;
		padding: 35rpx 30rpx;
		border-bottom: 1px solid #edebf3;
	}

	.fill-address input {
		color: #333;
		font-size: 32rpx;
	}

	.selectActive {
		color: #3080e8 !important;
		border-bottom: 1px solid #3080e8;
	}

	.right-line {
		height: 40rpx;
		width: 1px;
		background: #ccc;
		float: left;
	}

	.single-address {
		/* text-align: right; */
		width: 500rpx;
		overflow: hidden;
		color: #333;
		font-size: 32rpx;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.select-btn {
		width: 100%;
		height: 88rpx;
		color: #fff;
		background: #f44e30;
		line-height: 88rpx;
		text-align: center;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		font-size: 36rpx;
	}

	/* 更新于2019.5.8 */

	.industy {
		flex: 1;
	}

	.industy picker {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.industy picker text {
		flex: 1;
		font-size: 30rpx;
		color: #333;
	}

	.industy picker image {
		width: 12rpx;
		height: 18rpx;
		margin-left: 20rpx;
	}

	/* 更新于2019.5.8 */

	.activeItem {
		box-sizing: border-box;
		width: 710rpx;
		background: #fff;
	}

	.activeItem:nth-child(1) {
		border-top: none;
	}

	.activeItemBox {
		border: none;
	}

	.activeName {
		width: 185rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: justify;
		overflow: hidden;
		vertical-align: top;
		font-size: 30rpx;
		color: #333;
	}

	.activeName i {
		display: inline-block;
		width: 100%;
		height: 0;
	}

	.activeInputBox {
		font-size: 28rpx;
		color: #999;
		width: 450rpx;
		margin-left: 60rpx;
	}

	.couponUp {
		width: 400rpx;
		height: 280rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: url('http://xarkbucket.oss-cn-hangzhou.aliyuncs.com/license.jpg') no-repeat;
		background-size: 100% 100%;
		position: relative;
	}
	
	.couponUp-shop{
		background: url('https://bfr.oss-cn-shenzhen.aliyuncs.com/resources/Store-default-avatar.png') no-repeat;
		background-size: 100% 100%;
	}

	.couponUp .low-img {
		width: 90rpx;
		height: 90rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-45rpx, -45rpx);
	}

	.couponUp span {
		color: #ccc;
		font-size: 80rpx;
	}

	.imgRemain {
		padding: 10rpx 0rpx 50rpx 0rpx;
		font-size: 24rpx;
		color: #6e6e6e;
		min-height: 40rpx;
		border-bottom: none;
	}

	.img-success {
		width: 400rpx;
		height: 280rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-size: 100%;
		position: relative;
	}

	.img-success image {
		width: 400rpx;
		height: 280rpx;
	}

	.img-success text {
		display: block;
		width: 100%;
		height: 36rpx;
		font-size: 24rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.4);
		text-align: center;
		color: #fff;
		line-height: 36rpx;
	}

	.check-truth {
		display: flex;
		align-items: center;
		height: 50rpx;
		margin: 20rpx 0;
		font-size: 28rpx;
	}


	.check-truth text {
		color: #ed1515;
	}

	.btn-shops {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #f34930;
		color: #fff;
		border-radius: 8rpx;
		margin-top: 30rpx;
	}

	/*  重写 checkbox 样式  */
	/* 未选中的 背景样式 */
	checkbox .wx-checkbox-input {
		border-radius: 8rpx;
		/* 圆角 */
		width: 30rpx;
		/* 背景的宽 */
		height: 30rpx;
		/* 背景的高 */
	}

	/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		border: solid 1rpx transparent;
		background: #3080e8;
	}

	/* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
	checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
		border-radius: 8rpx;
		/* 圆角 */
		width: 30rpx;
		/* 选中后对勾大小，不要超过背景的尺寸 */
		height: 30rpx;
		/* 选中后对勾大小，不要超过背景的尺寸 */
		line-height: 30rpx;
		text-align: center;
		font-size: 30rpx;
		/* 对勾大小 30rpx */
		color: #fff;
		/* 对勾颜色 白色 */
		background: transparent;
		transform: translate(-50%, -50%) scale(.8);
		-webkit-transform: translate(-50%, -50%) scale(.8);
	}

	/* layer */
	.layer-content {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, .3);
		z-index: 9;
	}

	.layer-content .layer-cont {
		z-index: 10;
		width: 720rpx;
		height: 80%;
		position: fixed;
		top: 12%;
		left: 50%;
		transform: translateX(-360rpx);
		background: #fff;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
	}

	.layer-cont>view:nth-child(1) {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #333;
		font-size: 28rpx;
	}

	.layer-cont .contnet-xieyi {
		flex: 1;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		overflow-y: auto
	}

	.layer-cont .contnet-xieyi view {
		text-align: left;
	}

	.close-btn {
		position: fixed;
		top: 2%;
		right: 10rpx;
		width: 55rpx;
		height: 55rpx;
		border-radius: 100%;
		box-shadow: 2rpx 2rpx 2rpx 2rpx rgba(0, 0, 0, .4);
		z-index: 11;
		background: #fff;
	}
</style>

<style>
	.check-truth checkbox-group {
		width: 50rpx !important;
		height: 50rpx !important;
		margin-right: 20rpx;
	}
</style>
